<template>
    <div class="app-container">

        <div class="four-box">
            <div v-for="(item, index) in tablist" :key="index" class="four-item">
                <img class="four-img" :src="item.imgurl" alt="">
                <div class="four-cont">
                    <div class="four-tt">
                        <span class="big1">{{ item.price }}</span>
                        <span v-if="item.showtext" class="big2">{{ item.text }}</span>
                        <span>元</span>
                    </div>
                    <div class="four-dd">
                        {{ item.title }}
                    </div>
                </div>
            </div>
        </div>

        <el-form class="search-form" :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
            <el-form-item label="订单号" prop="companyName">
                <el-input class="search-vitem" v-model="queryParams.companyName" placeholder="请输入订单号" clearable
                    @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="借款人" prop="creditCode">
                <el-input class="search-vitem" v-model="queryParams.creditCode" placeholder="请输入借款人" clearable
                    @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="状态" prop="companyNature">
                <el-select class="search-vitem" v-model="queryParams.companyNature" @change="handleQuery" clearable
                    filterable placeholder="选择订单状态">
                    <el-option v-for="(item, index) in 5" :key="index" :label="item" :value="item">
                        待提交
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="结清证明" prop="licensePeriod">
                <el-select class="search-vitem" v-model="queryParams.licensePeriod" @change="handleQuery" clearable
                    filterable placeholder="选择结清证明">
                    <el-option v-for="(item, index) in 5" :key="index" :label="item" :value="item">
                        结清证明
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="时间" prop="corporationName">
                <el-date-picker class="search-vitem" v-model="queryParams.corporationName" type="daterange"
                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="收款人" prop="corporationIdc">
                <el-input class="search-vitem" v-model="queryParams.corporationIdc" placeholder="请输入收款人" clearable
                    @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="产品名称" prop="corporationTel">
                <el-input class="search-vitem" v-model="queryParams.corporationTel" placeholder="请输入产品名称" clearable
                    @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="warning" plain icon="Download" @click="handleOpen(0)"
                    v-hasPermi="['system:company:export']">创建结清证明</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="Download" @click="handleOpen(1)"
                    v-hasPermi="['system:company:export']">查看债转通知</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="Download" @click="handleOpen(2)"
                    v-hasPermi="['system:company:export']">详情</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="Download" @click="handleExport"
                    v-hasPermi="['system:company:export']">导出</el-button>
            </el-col>
        </el-row>

        <el-table v-loading="loading" :data="companyList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="订单号" width="180" align="center" prop="userId" />
            <el-table-column label="借款人" align="center" prop="companyName" />
            <el-table-column label="借款金额" align="center" prop="creditCode" />
            <el-table-column label="待放款金额" width="100" align="center" prop="province" />
            <el-table-column label="收款人" align="center" prop="city" />
            <el-table-column label="状态" align="center" prop="companyNature" />
            <el-table-column label="受让方" align="center" prop="licensePeriod" />
            <el-table-column label="小贷机构" align="center" prop="corporationName" />
            <el-table-column label="产品名称" align="center" prop="corporationIdc" />
            <el-table-column label="申请日期" align="center" prop="corporationTel" />
            <el-table-column label="签署方式" align="center" prop="relationName" />
            <el-table-column label="联系人电话" width="100" align="center" prop="relationTel" />
            <el-table-column label="操作" align="center" width="300" fixed="right" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link type="primary" icon="Edit" @click="handleCertificate(scope.row)"
                        v-hasPermi="['system:company:edit']">创建结清证明</el-button>
                    <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="['system:company:edit']">查看债转通知</el-button>
                    <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="['system:company:edit']">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />

        <!-- 创建结清证明 -->
        <el-dialog title="创建结清证明" v-model="certificateOpen" width="450px" append-to-body>
            <el-form ref="certificateRef" :model="certificateRefForm" :rules="certificateRefRules" label-width="80px">
                <el-form-item label="结清日期" prop="establishmentDate">
                    <el-date-picker clearable v-model="certificateRefForm.establishmentDate" type="date"
                        value-format="YYYY-MM-DD" placeholder="请选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancel(0)">取 消</el-button>
                    <el-button type="primary" @click="submitForm(0)">确 定</el-button>
                </div>
            </template>
        </el-dialog>


        <!-- 查看债转通知 -->
        <el-dialog title="债转通知" v-model="refinancingOpen" width="450px" append-to-body>
            <el-form ref="refinancingRef" :model="refinancingForm" :rules="refinancingRules" label-width="100px">
                <el-form-item label="通知方式" prop="establishmentDate">

                    <el-checkbox-group v-model="refinancingForm.establishmentDate">
                        <el-checkbox-button v-for="city in 2" :label="city" :key="city">线上</el-checkbox-button>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="债转通知书" prop="establishmentDate">

                    <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                        :on-change="handleChange" :file-list="fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancel(1)">取 消</el-button>
                    <el-button type="primary" @click="submitForm(1)">确 定</el-button>
                </div>
            </template>
        </el-dialog>


        <!-- 查看债转通知 -->
        <el-dialog title="详情" v-model="open" width="450px" append-to-body>
            <div>

            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancel(2)">确 定</el-button>
                </div>
            </template>
        </el-dialog>




    </div>
</template>

<script setup name="Company">
import { listCompany, getCompany, addCompany } from "@/api/system/company";

const { proxy } = getCurrentInstance();

const companyList = ref([]);
const open = ref(false);
const certificateOpen = ref(false);
const refinancingOpen = ref(false);
const loading = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

import icon_order from '@/assets/rong/icon_order.png'
import icon_money from '@/assets/rong/icon_money.png'
import icon_monthly from '@/assets/rong/icon_monthly.png'
import icon_today from '@/assets/rong/icon_today.png'

const data = reactive({

    tablist: [
        {
            imgurl: icon_order,
            title: '总申请额',
            price: '1.59',
            text: '亿',
            showtext: true
        },
        {
            imgurl: icon_money,
            title: '总放款额',
            price: '2.40',
            text: '亿',
            showtext: true
        },
        {
            imgurl: icon_monthly,
            title: '本月放款总额',
            price: '12,562',
            text: '亿',
            showtext: false
        },
        {
            imgurl: icon_today,
            title: '今日放款总额',
            price: '0',
            text: '亿',
            showtext: false
        }
    ],

    form: {}, // 基本详情
    refinancingForm: {}, // 查看债转通知
    fileList: [],
    certificateRefForm: {}, // 创建结清证明
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        companyName: null,
        creditCode: null,
        companyNature: null,
        licensePeriod: null,
        corporationName: null,
        corporationIdc: null,
        corporationTel: null,
        relationName: null,
        relationTel: null,
    },
    certificateRefRules: {
        establishmentDate: [
            { required: true, message: "结清日期不能为空", trigger: "blur" }
        ],
    },
    refinancingRules: {
        establishmentDate: [
            { required: true, message: "结清日期不能为空", trigger: "blur" }
        ],
    }
});

const { queryParams, form, certificateRefForm, refinancingForm, certificateRefRules, refinancingRules, tablist, fileList } = toRefs(data);

/** 查询公司信息列表 */
function getList() {
    loading.value = true;
    listCompany(queryParams.value).then(response => {
        companyList.value = response.rows;
        total.value = Number(response.total);
        loading.value = false;
    });
}




/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.userId);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}


/** 详情 */
function handleUpdate(row) {
    reset();
    const _userId = row.userId || ids.value
    getCompany(_userId).then(response => {
        form.value = response.data;
        open.value = true;
    });
}


// 取消按钮
function cancel(type = 0) {
    if (type == 0) {
        certificateOpen.value = false;
    } else if (type == 1) {
        refinancingOpen.value = false;
    } else if (type == 2) {
        open.value = false;
    }
    reset(type);
}

// 表单重置
function reset(type = 0) {
    if (type == 0) {
        certificateRefForm.value = {
            establishmentDate: null,
        };
        proxy.resetForm("certificateRef");
    } else if (type == 1) {
        refinancingForm.value = {
            establishmentDate: null,
        };
        proxy.resetForm("refinancingRef");
    }
}

function handleOpen(type = 0) {
    reset(type);
    if (type == 0) {
        certificateOpen.value = true;
    } else if (type == 1) {
        refinancingOpen.value = true;
    } else if (type == 2) {
        open.value = true;
    }

}

function submitForm(type = 0) {
    if (type == 0) {
        proxy.$refs["certificateRef"].validate(valid => {
            if (valid) {
                addCompany(certificateRefForm.value).then(response => {
                    proxy.$modal.msgSuccess("提交成功");
                    certificateOpen.value = false;
                    getList();
                });
            }
        });
    } else if (type == 1) {
        proxy.$refs["refinancingRef"].validate(valid => {
            if (valid) {
                addCompany(refinancingForm.value).then(response => {
                    proxy.$modal.msgSuccess("提交成功");
                    refinancingOpen.value = false;
                    getList();
                });
            }
        });
    }
}

// 创建结清证明


function handleChange() {
    console.log('vvv')
}




/** 导出按钮操作 */
function handleExport() {
    proxy.download('system/company/export', {
        ...queryParams.value
    }, `company_${new Date().getTime()}.xlsx`)
}

getList();
</script>

<style lang="scss">
.four-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .four-item {
        width: calc((100% - 30px) / 4);
        height: 112px;
        background: #FFF5EF;
        border-radius: 16px;
        margin-right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;

        &:nth-child(4n) {
            margin-right: 0;
        }

        .four-img {
            width: 68px;
            height: 68px;
            display: block;
            flex-shrink: 0;
            margin-right: 14px;
        }

        .four-cont {
            line-height: 1;

            .four-tt {
                color: #333333;
                font-size: 12px;

                .big1 {
                    font-weight: 550;
                    color: #FF7C2F;
                    font-size: 28px;
                    padding-right: 2px;
                }

                .big2 {
                    color: #FF7C2F;
                    font-size: 14px;
                    padding-right: 2px;
                }
            }

            .four-dd {
                color: #666666;
                font-size: 12px;
                margin-top: 6px;
            }
        }
    }
}

.search-form {
    margin-top: 20px;

    .search-vitem {
        width: 230px !important;
    }
}
</style>
